{extend name="template"}

{block name="body"}

<style>
    .layui-nav .layui-this:after, .layui-nav-bar, .layui-nav-tree .layui-nav-itemed:after{
        background-color: #EE5C5D;
    }
    .layui-nav .layui-nav-child dd.layui-this a, .layui-nav-child dd.layui-this{
        background-color:#EE5C5D;
    }
</style>
<div class="layui-fluid padding-0">

    <div class="layui-row" style="line-height:5px;height: 5px;background-color: #EE5C5D;">
        &nbsp;
    </div>

    <div class="layui-row" style="height: 100px;">
        <div style="width:1024px;margin:0 auto;height:100px;text-align: left;">
            <div class="layui-inline" style="width:200px;margin-top:10px;height:80px;">
                <img style="height:60px;" src="__ROOT__/static/index/img/logo1.png">
            </div>
            <div class="layui-inline" style="width:760px;height:100px;line-height:100px;text-align: left;">
                <ul class="layui-nav" style="background-color:transparent;color:#282828;">
                    {foreach $list as $key=>$vo}
                    <li class="layui-nav-item ">
                    <a style="font-size:16px;font-family: 微软雅黑;color:#282828;" href="">关于协会组织</a>
                    </li>
                    {/foreach}


                    <!--<li class="layui-nav-item ">-->
                        <!--<a style="font-size:16px;font-family: 微软雅黑;color:#282828;" href="">关于协会组织</a>-->
                    <!--</li>-->
                    <!--<li class="layui-nav-item ">-->
                        <!--<a style="font-size:16px;font-family: 微软雅黑;color:#282828;" href="">政策法规</a>-->
                    <!--</li>-->
                    <!--<li class="layui-nav-item ">-->
                        <!--<a style="font-size:16px;font-family: 微软雅黑;color:#282828;" href="">行业动态</a>-->
                    <!--</li>-->
                    <!--<li class="layui-nav-item ">-->
                        <!--<a style="font-size:16px;font-family: 微软雅黑;color:#282828;" href="">企业园地</a>-->
                    <!--</li>-->
                    <!--<li class="layui-nav-item ">-->
                        <!--<a style="font-size:16px;font-family: 微软雅黑;color:#282828;" href="">产品介绍&nbsp;&nbsp;</a>-->
                        <!--<dl class="layui-nav-child">-->
                            <!--<dd><a href="javascript:;">设备产品</a></dd>-->
                            <!--<dd><a href="javascript:;">生产产家</a></dd>-->
                            <!--<dd><a href="javascript:;">其他产品</a></dd>-->
                        <!--</dl>-->
                    <!--</li>-->
                    <!--<li class="layui-nav-item ">-->
                        <!--<a style="font-size:16px;font-family: 微软雅黑;color:#282828;" href="">教育培训</a>-->
                    <!--</li>-->
                </ul>
            </div>
            <div class="layui-inline" style="width:62px;font-size:24px;height:100px;line-height:100px;">
                <span class="nav-icon padding-left-5 fa fa-search"></span>
            </div>
        </div>
    </div>

    <div class="layui-row">
        <div class="layui-carousel" id="test1">
            <div carousel-item>
                <div><img style="height:700px;width:1680px;"  src="__ROOT__/static/index/img/banner1.jpg"></div>
                <div><img style="height:700px;width:1680px;"  src="__ROOT__/static/index/img/banner1.jpg"></div>
            </div>
        </div>
    </div>

    <div class="layui-row" style="margin-top:20px;">
        <div style="width:1024px;margin:0 auto;height:100px;text-align: left;">

            <div style="float:left;width:600px;margin-right:24px;">
                <div style="width:100%;border-bottom:1px solid #ccc;padding-bottom:5px;font-size:20px;">
                    <span style="padding:0 4px;background-color: red;"></span>
                    <span style="padding-left:10px;font-weight:bold;">关于协会组织</span>
                </div>
                <div style="margin-top:10px;">
                    <div><img style="height:200px;width:600px;"  src="__ROOT__/static/index/img/intro.jpg"></div>
                    <div style="padding:10px 5px;">
                        <div style="font-family: 微软雅黑;font-size: 14px;text-indent:30px;line-height:22px;">
                            我国大规模开发利用天然气的条件已经成熟。在全球天然气发展的大格局下，中国能源结构“气化”进程也在明显加快，我国能源管理部门和能源企业已经意识到了发展天然气的重要意义，中国已经随着世界的脚步走向以气为主的能源结构调整新阶段。未来五年，天然气消费将有较快发展。
                        </div>
                    </div>
                </div>
            </div>
            <div style="float:left;width:400px;">
                <div style="width:100%;border-bottom:1px solid #ccc;padding-bottom:5px;font-size:20px;">
                    <span style="padding:0 4px;background-color: red;"></span>
                    <span style="padding-left:10px;font-weight:bold;">行业动态</span>
                </div>
                <div>
                    <dl style="display: block;height: 100px;margin-top:10px;">
                        <dt style="float:left;">
                            <img style="height:90px;width:120px;"  src="__ROOT__/static/index/img/news1.jpg">
                        </dt>
                        <dd style="float:left;font-size:14px;padding:3px 5px;">
                            伴随石油一起开低烃类气体称石油伴生气。
                        </dd>
                    </dl>
                    <dl style="display: block;height: 100px;">
                        <dt style="float:left;">
                            <img style="height:90px;width:120px;"  src="__ROOT__/static/index/img/news2.jpg">
                        </dt>
                        <dd style="float:left;font-size:14px;padding:3px 5px;">
                            伴随石油一起开低烃类气体称石油伴生气。
                        </dd>
                    </dl>
                    <dl style="display: block;height: 100px;">
                        <dt style="float:left;">
                            <img style="height:90px;width:120px;"  src="__ROOT__/static/index/img/news3.jpg">
                        </dt>
                        <dd style="float:left;font-size:14px;padding:3px 5px;">
                            伴随石油一起开低烃类气体称石油伴生气。
                        </dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-row" style="margin-top:20px;">
        <div style="width:1024px;margin:0 auto;height:100px;text-align: left;">
            <div style="width:100%;border-bottom:1px solid #ccc;padding-bottom:5px;font-size:20px;">
                <span style="padding:0 4px;background-color: red;"></span>
                <span style="padding-left:10px;font-weight:bold;">产品介绍</span>
            </div>
            <div style="margin-top:10px;">
                <div style="width: 330px;margin-right:17px;float:left;">
                    <div style="width: 330px;display: inline-block;">
                        <img style="height:140px;width:330px;"  src="__ROOT__/static/index/img/product1.jpg">
                    </div>
                    <div style="width: 330px;font-size:13px;line-height:24px;">
                        燃气设施设备产品
                    </div>
                </div>
                <div style="width: 330px;margin-right:17px;float:left;">
                    <div style="width: 330px;display: inline-block;">
                        <img style="height:140px;width:330px;"  src="__ROOT__/static/index/img/product2.jpg">
                    </div>
                    <div style="width: 330px;display: inline-block;font-size:13px;line-height:24px;">
                        燃气设施设备产品
                    </div>
                </div>
                <div style="width: 330px;float:left;">
                    <div style="width: 330px;">
                        <img style="height:140px;width:330px;"  src="__ROOT__/static/index/img/product3.jpg">
                    </div>
                    <div style="width: 330px;font-size:13px;line-height:24px;">
                        燃气设施设备产品
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-row" style="margin-top: 20px;background-color: #EE5C5D;">
        <div style="width:1024px;margin:0 auto;height:140px;text-align: left;padding-top:40px;font-size:14px;line-height:24px;color:white;">
            <div style="width:200px;float:left;background-color: white;">
                <img style="height:60px;" src="__ROOT__/static/index/img/logo2.png">
            </div>
            <div style="width:280px;float:left;padding-left:50px;">
                <div>地址：长沙市天心区刘家冲路11号</div>
                <div>24小时服务电话：322334454554</div>
                <div>举报监督电话：323253545</div>
            </div>
            <div style="width:200px;float:left;padding-left:30px;">
                <div>备案号：323242342334</div>
                <div>Copyright：燃气协会</div>
                <div>测试设备</div>
            </div>
            <div style="float:left;padding-left:30px;margin-top:-20px;text-align: center;">
                <img style="height:120px;width:120px;" src="__ROOT__/static/index/img/qrcode.png">
                <div>扫一扫，关注我们的微信公众号</div>
            </div>
        </div>
    </div>
</div>

<div id="search_form" style="display:none;">

<div style="height:100%;width:100%;background-color:black;opacity:0.4;position:fixed;top:0;right:0;left:0;bottom:0;" >

</div>
<div  style="z-index:1000;color:white;background-color:#666;width:100%;height:160px;position:fixed;top:0;left:0;right:0;">
    <div style="width:1024px;margin:0 auto;padding-top:45px;">
        <div style="float:left;width:200px;">
            <img style="color:red;height:60px;" src="__ROOT__/static/index/img/logo2_2.png">
        </div>
        <div style="float:left;">
            <div style="width:600px;">
                <ul style="font-size:18px;line-height:32px;">
                    <li style="color:#fe0000;float:left;margin-right:10px;">热点新闻</li>
                    <li style="float:left;margin-right:10px;">行业新闻</li>
                    <li style="float:left;margin-right:10px;">产品</li>
                    <li style="float:left;">设备</li>
                </ul>
            </div>
            <div>
                <input placeholder="请输入您要搜索的关键字" type="text" style="font-size:14px;padding:4px 5px;border:1px solid #ccc;border-radius:4px;height:26px;width:600px;" />
                <span style="font-size: 24px;" class="nav-icon padding-left-20 fa fa-search"></span>
                <span id="btn-close" style="font-size: 24px;" class="nav-icon padding-left-20 fa fa-close"></span>
            </div>
        </div>
    </div>
</div>
</div>

{/block}

{block name='style'}
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<script>if (location.href.indexOf('#') > -1) location.replace(location.href.split('#')[0])</script>
<link rel="stylesheet" href="__ROOT__/static/index/index.css">
{/block}

{block name='script'}
<script src="__ROOT__/static/index/index.js"></script>
<script>
    layui.use('carousel', function(){
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            ,width: '100%' //设置容器宽度
            ,height: '450px'
            ,arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
        });
    });
    window.$= layui.$;
    $(function () {
        $(document).on('click','#btn-close',function() {
            $("#search_form").hide();
        });
        $(document).on('click','.fa-search',function() {
            $("#search_form").show();
        });
    });
</script>
{/block}
